require(['./config'],()=>{
	require(['template','header','footer','elevateZoom','fly'],(template,header)=>{
		class DetailPage{
			constructor(arg) {
				this.Detail().then(resp=>{
					this.magnifying()
					this.addToCart()
				})
			}
			Detail(){
				//从任务栏获取id，更具id来请求相应的接口
				return new Promise((reslove)=>{
				const id =location.search.slice(4)
				$.get('http://www.xiongmaoyouxuan.com/api/detail',{id},resp=>{
					if(resp.code===200){
						//从detail里把需要的结构出来
						const {
							// detail
							id,
							photo,
							title,
							saleNum,
							itemId,
							price,
							tbOriginPrice
						} = resp.data.detail
						this.detail={
							id,
							photo,
							title,
							saleNum,
							itemId,
							price,
							tbOriginPrice
						}
						// const {detail}=resp.data
						// console.log(detail)
						// console.log(photo)
						$('#detailcon').html(template('detailconTemplate',{
							...this.detail,
							count:1
							// detail
							// id,
							// photo,
							// title,
							// saleNum,
							// itemId,
							// price,
							// tbOriginPrice
						}))
					}	
									reslove()
				})
				})
			}
			//
			magnifying(){
				$('.zoom-image').elevateZoom({
					gallery:'gal1'
				})
			}
			//加入购物车localstorage
			addToCart(){
				$('#btnshoppingcart').on('click',e=>{
					this.fly(e)
					//先取判断是否有数据
					let cart =localStorage.getItem('cart')
					if(cart){
						//有数据
						//继续判断已有的数据里面是否含有当前的数据
						//如果包含当前数据数量+就可以
						//如果没有就push
						cart=JSON.parse(cart)
						const isExist=cart.some(shop=>{
							return shop.id===this.detail.id
						})
						if(isExist){
							//当前商品以加过数量+1
							cart = cart.map(shop =>{
								if(shop.id===this.detail.id){
									shop.count++
								}
								return shop
							})
						}else{
							cart.push({
									...this.detail,
									count:1,
									check:true
									})
						}
						localStorage.setItem('cart',JSON.stringify(cart))
						
					}else{
						//就算只存一个数组也存数组
						
						localStorage.setItem('cart',JSON.stringify([{
							...this.detail,
							count:1,
							check:true
						}]))
					}
				})
			}
			 fly (e) {
			        $(`<img class="fly" src="${this.detail.photo[0].url}">`).fly({
			          start:{
			            left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
			            top: e.clientY,  //开始位置（必填）
			          },
			          end:{
			            left: $('#addcartnumber').offset().left - $(window).scrollLeft(), //结束位置（必填）
			            top: $('#addcartnumber').offset().top - $(window).scrollTop()  //结束位置（必填）
			            // width: 100, //结束时高度
			            // height: 100, //结束时高度
			          },
			          // autoPlay: false, //是否直接运动,默认true
			          speed: 0.7, //越大越快，默认1.2
			          // vertex_Rtop: 100, //运动轨迹最高点top值，默认20
			          onEnd: function(){
			            this.destroy()
			            // 重新计算购物车总数量
			            // 接收header对象调用header的方法实现计算
			            header.cartCount()
			          } //结束回调
			        })
			      }
		}
		new DetailPage()
	})
})